import React, { Component } from "react";
import { Table, Tabs, Button } from "antd";
import Articles from "../Article/Articles";
import ArticlesMon from "../Article/ArticlesMon";
import DataStatistics from "../DataStatistics/DataStatistics";

import { judgeMonCode } from '@/utils/formatMonTextStyle.js'
const { TabPane } = Tabs;

class CheckPendingTab extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  goBack = () => {
    this.props.parentBack();
  };
  render() {
    const columns = [
      {
        title: "站点名称",
        dataIndex: "site_name",
        key: "site_name",
        align: "center"
      },
      {
        title: "发布时间",
        dataIndex: "publish_time",
        key: "publish_time",
        align: "center"
      },
      {
        title: "审核人",
        dataIndex: "create_user",
        key: "create_user",
        align: "center"
      },
      {
        title: "审核时间",
        dataIndex: "delete_time",
        key: "delete_time",
        align: "center"
      },
      {
        title: "操作人",
        key: "execute_user",
        dataIndex: "execute_user",
        align: "center",
        render: (text, record) => <span style={{ color: "#fa5555" }}>{text}</span>
      },
      {
        title: "删稿说明",
        dataIndex: "notes",
        key: "notes",
        align: "center"
      }
    ];

    return (
      <div>
        <Tabs
          defaultActiveKey={this.props.tabKey}
          onChange={() => {}}
          tabBarExtraContent={
            <div>
              <Button onClick={this.goBack}>返回上一级</Button>
            </div>
          }
        >
          <TabPane tab="文章内容" key="1">
            {this.props.showTable ? (
              <Table 
                rowKey={record => record.delete_time} 
                columns={columns} 
                dataSource={this.props.delDetailsTable} 
                style={{ width: "70%" }} 
                size="middle" 
                bordered 
                pagination={false} 
              />
            ) : null}

            {/* 如果是蒙文内容 -> 加载蒙文详情页 组件，如果是中文内容 -> 加载中文详情页 组件 */}
            {judgeMonCode(this.props.contentData.title) ?
              <ArticlesMon handleGoBack={this.goBack} detailsContent={this.props} />
            :
              <Articles handleGoBack={this.goBack} detailsContent={this.props} />
            }

          </TabPane>

          <TabPane tab="数据统计" key="2">
            <DataStatistics statisticalData={this.props.statisticalData} />
          </TabPane>
        </Tabs>
      </div>
    );
  }
}

export default CheckPendingTab;
